import { createApp } from "vue"
import KNotice from "../components/KNotice";

function create(Component, props) {

    const parent = document.createElement('div')

    //createApp返回一个提供应用上下文的应用实例。
    // 应用实例挂载的整个组件树共享同一个上下文。
    const vm = createApp(Component, props)

    //vue2.x 渲染结果会替换div
    //vue3.x 渲染结果会替换div的innerHTML
    const comp = vm.mount(parent)
    console.log(3, comp.$el)

    document.body.append(comp.$el)



    //删除
    comp.remove = () => {
        document.body.removeChild(comp.$el)

        vm.unmount(parent)
    }

    return comp
}

// export default create
//这里采用插件，使用的时候就不需要引入组件了 直接调$notice
export default {
    install(app) {
        app.config.globalProperties.$notice = function(options) {
            return create(KNotice, options)
        }
    }
}